<template>
    <view class="goods-card">
        <view class="goods-item" v-for="(item,index) in dataList" :key="index" @tap="toGoodsInfo(item)">
            <image class="image" :src="item.images_arr[0]"/>
            <view class="title">{{item.goods_name}}</view>
        </view>
    </view>
</template>
<script setup>
const props = defineProps({
    dataList: {
        type: Array,
        default: null
    }
})

const toGoodsInfo=(item) => {
    qly.page.open('/pages/home/goods/detail', {id: item.id})
}
</script>
<style scoped lang="scss">
.goods-card {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 18rpx;
    
    .goods-item {
        width: 100%;
        
        .image {
            width: 100%;
            height: 160rpx;
            border-radius: 12rpx;
        }
        
        .title {
            font-size: 28rpx;
            color: #606266;
            text-align: center;
            width: 140rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
